<template>
  <div class="goods_items">
      <img src="../../assets/null.jpg" v-if="this.goodsList.length == 0" width="100%">
      <div class="goods_item" v-else v-for="(item, index) in goodsList" :key="index">
          <div class="goods_item_img">
              <img :src="item.pic" width="100%">
          </div>
          <div class="goods_item_text">{{item.name}}</div>
          <div class="goods_item_price">￥{{item.originalPrice+'.00'}}</div>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            goodsList: []
        }
    },
    mounted() {
        var name = this.$route.query.item.name;
        this.$API.getList().then(res=> {
            var allGoods = res.data.data;
            allGoods.forEach(item=> {
                if(item.name.includes(name)) {
                    this.goodsList.push(item)
                }
            })
        })
    }
}
</script>

<style>
.goods_items {
    margin-top: 1.1rem;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.goods_item {
    width: 47%;
    height: 4.8rem;
    margin: 0.1rem;
}
.goods_item_img {
    width: 100%;
    height: 3.5rem;
}
.goods_item_text {
    background-color: #F0EDD4;
    color: #B69B72;
    font-size: 0.25rem;
    padding: 0.1rem 0;
}
.goods_item_price {
    color: red;
}
</style>